<template>
      <div>
        <el-dialog
        :visible="this.$store.state.showlogin" custom-class="loginRegistered"
        width="800px" 
        @open="opendialog"
        :lock-scroll=false
        @close="closedialog"
        
        >
           <div class="main">
             <div class="shoutitle">
                <img v-if="this.radio != 1" src="http://p6dwecco6.bkt.clouddn.com/img/login-banner1.png" alt="">
                <img v-else src="http://p6dwecco6.bkt.clouddn.com/img/regsiter-banner1.png" alt="">                
             </div>
              <div class="login-reg scoreTitle" v-if="!isShowScore">
                  <p>根据《私募投资基金监督管理暂行办法》第四章第十四条规定："私募基金管理人、私募基金销售机构不得向合格投资者之外的单位和个人募集资金，不得通过报刊、电台、电视、互联网等公众传播媒体或者讲座、报告会、分析会和布告、传单、手机短信、微信、博客和电子邮件等方式，向不特定对象宣传推介。"
天沁财富谨遵《私募投资基金监督管理暂行办法》之规定，只向特定投资者展示私募基金产品信息，不构成任何投资推介建议。
合格投资者是指具备相应风险识别能力和风险承担能力，投资于单只私募基金的金额不低于100万元且符合下列相关标准的机构和个人：
（一）净资产不低于1000万元的机构； （二）金融资产不低于300万元或者最近三年个人年均收入不低于50万元的个人。
前款所称金融资产包括银行存款、股票、债券、基金份额、资产管理计划、银行理财产品、信托计划、保险产品、期货权益等。
阁下如有意了解或进行私募基金投资，请注册成为格上财富用户以确认您的合格投资者的条件</p>
                   <el-button @click="goscore" class="goscore">进行问卷调查</el-button>
              </div>
             <div class="login-reg" v-if="isShowScore">
               <div class="tab" v-show="this.radio != 2">
                 <span class="tabdetail" :class="{tabdetailnative:this.radio == 1}" @click="changetab(1)">注册</span>
                 <span class="tabdetail" :class="{tabdetailnative:this.radio == 0}" @click="changetab(0)">登录</span>
               </div>
               <div class="tab" v-show="this.radio == 2">
                 <span class="tabdetail" :class="{tabdetailnative:this.radio == 1}" @click="changetab(1)">注册</span>
                 <span class="tabdetail" :class="{tabdetailnative:this.radio == 0}" @click="changetab(0)">登录</span>
                 <span class="tabdetail tabdetailnative">忘记密码</span>
               </div>
                 <!-- <el-radio-group v-model="radio" class="tab" fill="#cd9c54">
                  <el-radio-button label="1" class="tabdetail">注册</el-radio-button>
                  <el-radio-button label="2" class="tabdetail">登录</el-radio-button>
                </el-radio-group> -->
                <div class="log" v-show="this.radio == 1">
                    <el-form @submit.native.prevent :model="ruleForm1" status-icon :rules="rules1" ref="ruleForm1" label-width="100px" class="demo-ruleForm">
                      <h1>手机号</h1>
                      <el-form-item label="" prop="tel">
                        <el-input size="medium" type="text" v-model="ruleForm1.tel"
                         auto-complete="off" placeholder="请输入手机号码！"
                         :disabled="isDisabled"
                         ></el-input>
                      </el-form-item>
                      <h1>验证码</h1>
                      <el-form-item label="" prop="code">
                        <el-input size="medium" type="text" class="code" v-model="ruleForm1.code" auto-complete="off" placeholder="请输入验证码！"></el-input>
                        <el-button type="text" @click="smsCode" class="codeButton" size="mini" :disabled="isDisabled">{{ getsmsInfo }}</el-button>
                      </el-form-item>
                      <h1>密码</h1>
                      <el-form-item label="" prop="pass">
                        <el-input size="medium" type="password" auto-complete="off" v-model="ruleForm1.pass" placeholder="请设置密码！"></el-input>
                      </el-form-item>
                      <!-- <el-form-item label="确认密码" prop="checkPass">
                        <el-input size="mini" type="password" v-model="ruleForm1.checkPass" auto-complete="off" placeholder="请确认密码！"></el-input>
                      </el-form-item> -->
                      <div class="submit">
                        <el-button class="submitbutton" @click="submitForm('ruleForm1')">确认注册</el-button>                        
                      </div>
                    </el-form>
                </div>
                <div class="terms" v-show="this.radio == 1">
                    <p class="terms-first">您需进行身份认证后才能访问。根据《私募投资基金募集行为管理办法》之规定，天沁财富只对具有相应风险识别能力和风险承担能力，投资于单只私募基金的金额不低于100万元，且个人资产不低于300万元或者最近三年个人年均收入不低于50万元”的特定投资者宣传、推介相关私募投资基金产品。</p>
                    <el-switch class="switch"
                    active-color="#cd9c54"
                      v-model="protocol"
                      active-text=""
                      inactive-text="">
                    </el-switch>
                    <p class="terms-two">我已阅读并同意天沁财富<a href="/protocol" target="_blank">《用户服务协议》</a></p>
                </div>

                <div class="reg" v-show="this.radio == 0">
                     <el-form @submit.native.prevent :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm1">
                      <h1>手机号</h1>                       
                      <el-form-item label="" prop="tel">
                        <el-input size="medium" type="text" v-model="ruleForm2.tel" auto-complete="off" placeholder="请输入手机号码！"></el-input>
                      </el-form-item>
                      <h1>密码</h1>
                      <el-form-item label="" prop="pass">
                        <el-input size="medium" type="password" v-model="ruleForm2.pass" auto-complete="off" placeholder="请输入密码！"></el-input>
                      </el-form-item>
                      <div class="submit">
                        <el-button class="submitbutton-2" @click="login('ruleForm2')">登录</el-button>                        
                      </div>
                      <div class="forget">
                        <span @click="changetab(2)">忘记密码</span>
                      </div>
                    </el-form>
                </div>

                <div class="log" v-show="this.radio == 2">
                    <el-form @submit.native.prevent :model="ForgetruleForm" status-icon :rules="rules3" ref="ForgetruleForm" label-width="100px" class="demo-ruleForm">
                      <h1>手机号</h1>
                      <el-form-item label="" prop="tel">
                        <el-input size="medium" type="text" v-model="ForgetruleForm.tel"
                         auto-complete="off" placeholder="请输入手机号码！"
                         :disabled="isDisabled1"
                         ></el-input>
                      </el-form-item>
                      <h1>验证码</h1>
                      <el-form-item label="" prop="code">
                        <el-input size="medium" type="text" class="code" v-model="ForgetruleForm.code" auto-complete="off" placeholder="请输入验证码！"></el-input>
                        <el-button type="text" @click="smsCodeforget" class="codeButton" size="mini" :disabled="isDisabled1">{{ getsmsInfo1 }}</el-button>
                      </el-form-item>
                      <h1>密码</h1>
                      <el-form-item label="" prop="pass">
                        <el-input size="medium" type="password" v-model="ForgetruleForm.pass" auto-complete="off" placeholder="请设置密码！"></el-input>
                      </el-form-item>
                      <div class="submit">
                        <el-button class="submitbutton" @click="submitFormgorget('ForgetruleForm')">确认注册</el-button>                        
                      </div>
                    </el-form>
                </div>
                
             </div>
           </div>
      </el-dialog>
    
      </div>
</template>
<script>
import api from '../static/js/api.js';
import { thisExpression } from 'babel-types';
var resetButton;
var resetButton1;

export default {
  data() {
    var validateTel = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入手机号码"));
      } else if (!/^1\d{10}$/.test(value)) {
        callback(new Error("请输入正确手机号!"));
      } else {
        callback();
      }
    };
    var validateTel2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入手机号码"));
      } else if (!/^1\d{10}$/.test(value)) {
        callback(new Error("请输入正确手机号!"));
      } else {
        callback();
      }
    };
    var validateCode = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入验证码"));
      } else if (value.length !== 4) {
        callback(new Error("请正确输入验证码"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else if (value.length < 6) {
        callback(new Error("密码最少6位"));
      } else {
        // if (this.ruleForm1.checkPass !== "") {
        //   this.$refs.ruleForm1.validateField("checkPass");
        // }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else if (value.length < 6) {
        callback(new Error("密码最少6位"));
      } else {
        callback();
      }
    };
    // var validatePassTwo = (rule, value, callback) => {
    //   if (value === "") {
    //     callback(new Error("请再次输入密码"));
    //   } else if (value !== this.ruleForm1.pass) {
    //     callback(new Error("两次输入密码不一致!"));
    //   } else {
    //     callback();
    //   }
    // };
    return {
      getsmsInfo:"获取验证码",
      getsmsInfo1:"获取验证码",
      reclickTime:60,
      reclickTime1:60,  
      isDisabled:false,
      isDisabled1:false,
      isShowScore: true,
      radio: "1",
      protocol: true,
      condition: false,
      ruleForm1: {
        pass: "",
        //checkPass: "",
        tel: "",
        code: ""
      },
      ruleForm2: {
        tel: "",
        pass: ""
      },
      ForgetruleForm: {
        pass: "",
        //checkPass: "",
        tel: "",
        code: ""
      },
      rules1: {
        code: [{ validator: validateCode, trigger: "blur" }],
        tel: [{ validator: validateTel, trigger: "blur" }],
        pass: [{ validator: validatePass, trigger: "blur" }],
       // checkPass: [{ validator: validatePassTwo, trigger: "blur" }]
      },
      rules2: {
        tel: [{ validator: validateTel2, trigger: "blur" }],
        pass: [{ validator: validatePass2, trigger: "blur" }]
      },
      rules3: {
        code: [{ validator: validateCode, trigger: "blur" }],
        tel: [{ validator: validateTel, trigger: "blur" }],
        pass: [{ validator: validatePass, trigger: "blur" }],
      }
    };
  },
  props: {
  
  },
  methods: {
    opendialog(){

    },
    closedialog(){
      this.$emit("closedialog")
      // if(this.$store.state.nologin){
      //           if(closenum == 1){
      //             setTimeout(function(){
      //               var href = window.location.href;    
      //               if(href.indexOf("research") != -1 || href.indexOf("advisory") != -1 || href.indexOf("web") != -1 || href.indexOf("school") != -1 || href.indexOf("post") != -1 || href.indexOf("about") != -1){
      //                   return false;
      //               }else{
      //                   that.$store.state.showlogin = true
      //               }
      //             },10000)
      //           }
      //           if(closenum > 1){
      //             setTimeout(function(){
      //               var href = window.location.href;    
      //               if(href.indexOf("research") != -1 || href.indexOf("advisory") != -1 || href.indexOf("web") != -1 || href.indexOf("school") != -1 || href.indexOf("post") != -1 || href.indexOf("about") != -1){
      //                   return false;
      //               }else{
      //                   that.$store.state.showlogin = true
      //               }
      //             },5000)
      //           }
      //   }
    },
    changetab(val){
        this.radio = val;
    },
    //忘记密码验证码
    smsCodeforget(){
        if(/^1\d{10}$/.test(this.ForgetruleForm.tel)){
        api.sendSmsCode({mobile:this.ForgetruleForm.tel,event:"resetpwd"}).then((res)=>{
           if(res.code == 1){
              this.sendNumber1();
           }else{
             this.$alert(res.msg)
           }
        })
        }else{
            this.$alert("请正确填写手机号");
              return false;
        }
    },
    //获取验证码
    smsCode(){
     if(/^1\d{10}$/.test(this.ruleForm1.tel)){
        api.sendSmsCode({mobile:this.ruleForm1.tel,event:"register"}).then((res)=>{
           if(res.code == 1){
              this.sendNumber();
           }else{
             this.$alert(res.msg)
           }
        })
     }else{
        this.$alert("请正确填写手机号");
          return false;
     }
    },

    sendNumber(){
          this.isDisabled = true;
        this.getsmsInfo = this.reclickTime + "秒后重获";
         resetButton = setInterval(this.doLoop, 1000);
    },
    sendNumber1(){
          this.isDisabled1 = true;
        this.getsmsInfo1 = this.reclickTime + "秒后重获";
         resetButton1 = setInterval(this.doLoop1, 1000);
    },
    doLoop() {
          this.reclickTime--;
          if (this.reclickTime > 0) {
              this.getsmsInfo = this.reclickTime + "秒后重获";
          } else {
              clearInterval(resetButton);
              this.isDisabled = false;
                this.getsmsInfo = "获取验证码";
              this.reclickTime = 60;
          }
      },
    doLoop1() {
          this.reclickTime1--;
          if (this.reclickTime1 > 0) {
              this.getsmsInfo1 = this.reclickTime1 + "秒后重获";
          } else {
              clearInterval(resetButton1);
              this.isDisabled1 = false;
                this.getsmsInfo1 = "获取验证码";
              this.reclickTime1 = 60;
          }
      },
    //重置密码
    submitFormgorget(formName){
        this.$refs[formName].validate(valid => {
        if (valid) {
            api.resetpwd({mobile:this.ForgetruleForm.tel,newpassword:this.ForgetruleForm.pass,code:this.ForgetruleForm.code}).then((res)=>{
             if(res.code == 1){
                this.radio = 0;               
                this.$alert(res.msg);
            }else{
              this.$alert(res.msg);
            }
        })
        } else {
          this.$alert("请正确填写相关数据");
          return false;
        }
      });
    },
      //注册
    submitForm(formName) {
      if(!this.protocol){
        this.$alert("请同意天沁财富用户服务协议");
        return;
      }
      this.$refs[formName].validate(valid => {
        if (valid) {
            api.registered({mobile:this.ruleForm1.tel,password:this.ruleForm1.pass,code:this.ruleForm1.code}).then((res)=>{
             if(res.code == 1){
               this.$store.state.userinfo = res.data.userinfo;
               localStorage.setItem('userinfo',JSON.stringify(res.data.userinfo))
                 localStorage.setItem('nologin',false)
                 console.log("isCertificate" + res.data.userinfo.isCertificate)
               if(res.data.userinfo.isCertificate == 0){
                    this.isShowScore = false;
                    this.$store.state.nologin = false;
               }else{
                    this.$store.state.showlogin = false;
                    this.$store.state.nologin = false;
               }
            }else{
              this.$alert(res.msg)
            }
        })
        } else {
          this.$alert("请正确填写相关数据");
          return false;
        }
      });
    },
    login(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          api.userLogin({
            account:this.ruleForm2.tel,
            password:this.ruleForm2.pass
          }).then(
            (res)=>{
              if(res.code == 1){
                this.$store.state.userinfo = res.data.userinfo;
                localStorage.setItem('userinfo',JSON.stringify(res.data.userinfo))
                this.$store.state.nologin = false;
                this.$store.state.showlogin = false;
                 localStorage.setItem('nologin',false)
                this.theckRouter(this.$store.state.userinfo)
              }else{
                 this.$alert(res.msg)
              }
            }
          )
        } else {
          this.$alert("请正确填写相关数据");
          return false;
        }
      });
    },
    theckRouter(data){
      this.$store.state.nologin = false;
      this.isShowScore = true;
        if(data.isCommit == 0){ 
             this.$store.state.routerBack = 2;
             this.$router.push('score');
        }else if(data.isCommit == 1 && data.isRisk == 0){
             this.$store.state.routerBack = 1;
             this.$router.push('scoretest');
        }
    },
    goscore() {
      this.$store.state.showlogin = false;
      this.theckRouter(this.$store.state.userinfo)
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.forget{
  text-align: right;
  margin-top: 20px;
}
.forget span{
  margin-right: 46px;
  color: #409eff;
  cursor: pointer;
}
.demo-ruleForm1 h1{
  padding-left: 100px;  
      margin-top: 16px;
}
.demo-ruleForm h1{
  padding-left: 100px;  
      margin-top: 16px;
}
.demo-ruleForm{
      margin-left: -58px;
}
.demo-ruleForm1{
      margin-left: -58px;
}
.tabdetail{
  font-size: 26px;
  color: #666;
  height: 40px;
  display: inline-block;
  line-height: 34px;
  cursor: pointer;
}
.tabdetail:nth-child(2){
  margin-left: 30px;
}
.tabdetail:nth-child(3){
  margin-left: 30px;
}
.tabdetailnative{
  color: #cd9c54;
  border-bottom:3px solid #cd9c54;
}
.scoreTitle {
  text-align: center;
  margin-top: 26px;
}
.scoreTitle p {
  text-align: center;
  text-indent: 2rem;
  width: 90%;
  margin: 0 auto;
  font-size: 12px;
  color: #cd9c54;
}
.scoreTitle .goscore {
  margin-top: 60px;
  background: #cd9c54;
  color: white;
}
.reg {
  height: 250px;
}
.log {
  height: 250px;
}
.terms {
  width: 90%;
  margin: 0 auto 20px;
}
.terms .title {
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  margin: 20px auto 10px;
} 
.terms .terms-first {
  text-indent: 2rem;
  font-size: 12px;
  margin-top: 46px;
}
.terms .switch {
  display: inline-block;
  vertical-align: middle;
}
.terms .terms-two {
  display: inline-block;
  vertical-align: middle;
}
.terms .terms-two a {
  color: #409eff;
}
.terms .terms-three {
  text-indent: 2rem;
  font-size: 12px;
}
.submit {
  text-align: center;
  margin-left: 58px;
}
.submit .submitbutton {
  width: 82%;
  margin-top: 10px;
  background: #cd9c54;
  color: white;
  border: none;
}
.submit .submitbutton-2 {
  width: 82%;
  margin-top: 30px;
  background: #cd9c54;
  color: white;
  border: none;
}
.el-form-item__content {
  margin-left: 0;
  text-align: center;
}
.el-form-item {
  margin-bottom: 10px;
}
.el-form-item .el-input {
  width: 90%;
}
.el-form-item .code {
  width: 58%;
}
.tab {
  width: 100%;
  margin: 0 0 8px 46px;
  text-align: left;
}
.codeButton {
  margin-left: 40px;
}
.main {
  height: 490px;
  width: 100%;
  margin-top: -22px;
  display: flex;
  justify-content: center;
  position: relative;
}
.shoutitle {
  height: 100%;
  width: 40%;
}
.shoutitle img{
  height: 558px;
  position: absolute;
  top: -38px;
  left: -90px;
}
.login-reg {
  height: 100%;
  width: 60%;
}

</style>
